<template>
    <div class="header-container">
        <div class="left-container">
            <el-button @click="handleCollapseMenu" size="small"><el-icon>
                    <Fold />
                </el-icon></el-button>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.name" :to="{ path: item.path }"
                    @click="updateBreadcrumb(item)">
                    {{ item.label }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right-container">
            <div class="dropdown">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-avatar class="avatar" :src="avatarUrl || defaultAvatar" />
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="goUserCenter">
                                <i class="el-icon-user"></i> 个人信息
                            </el-dropdown-item>
                            <!-- <el-dropdown-item @click="goUserSetting">
                                <i class="el-icon-s-tools"></i> 设置
                            </el-dropdown-item> -->
                            <div class="division"></div>
                            <el-dropdown-item @click="logout" class="logout">
                                <i class="el-icon-switch-button"></i> 退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useMenuStore } from '../store/menu.js'
import { useRouter } from "vue-router"
import { removeToken } from '@/utils/token';
import { useStore } from 'vuex'
import cloudbase from '@cloudbase/js-sdk'

const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const store = useStore();
const router = useRouter()
const menuStore = useMenuStore();
const breadcrumbList = menuStore.breadcrumbList;
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
const avatarUrl = ref('')

async function getAvatarUrl(avatar) {
  if (!avatar) return ''
  if (avatar.startsWith('cloud://')) {
    // 调用云函数获取临时链接
    const app = cloudbase.init({ env: 'cloud1-2gozbkkk09f11d05' })
    await app.auth().signInAnonymously()
    const res = await app.callFunction({
      name: 'Book', 
      data: {
        action: 'getImageUrl',
        fileID: avatar
      }
    })
    if (res.result && res.result.code === 200) {
      return res.result.data.tempFileURL
    }
    return ''
  } else {
    // 直接返回普通图片链接
    return avatar
  }
}

onMounted(async () => {
  if (userInfo && userInfo.avatar) {
    avatarUrl.value = await getAvatarUrl(userInfo.avatar)
  } else if (userInfo && userInfo.profile && userInfo.profile.avatar) {
    avatarUrl.value = await getAvatarUrl(userInfo.profile.avatar)
  } else {
    avatarUrl.value = ''
  }
})

const handleCollapseMenu = () => {
    menuStore.collapseMenu()
}
const updateBreadcrumb = (item) => {
    menuStore.updateBreadcrumb(item);
};

const goUserCenter = () => {
    router.push('/admin/user-profile')
};
const goUserSetting = () => {
    console.log("设置")
};
const logout = () => {
    removeToken('Token');
    store.commit('logout');
    localStorage.clear("userInfo")
    menuStore.reset();
    router.push('/login');
};
const navigateTo = (path) => {
    useRouter().push(path);
};
</script>

<style lang="scss" scoped>
.header-container {
    display: flex;
    padding: 0px;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(241, 241, 241);

    .left-container {
        display: flex;
        align-items: center;

        .el-button {
            margin-right: 20px;
            padding-left: 0px 10px;
            border: none;
            background-color: rgb(241, 241, 241);

            i {
                font-size: 30px;
                background-color: transparent;
            }

            svg:hover {
                color: rgba(39, 100, 253);
                transform: 2s;
            }
        }
    }

    .right-container {
        display: flex;
        padding: 0px 10px;

        .option {
            height: 50px;
            line-height: 50px;
            margin-right: 30px;
            font-size: 20px;
            cursor: pointer;
        }

        .dropdown {
            .el-dropdown {
                .avatar {
                    width: 35px;
                    height: 35px;
                }
            }
        }
    }
}

.el-dropdown-menu {
    .division {
        margin: 5px;
        height: 1px;
        background-color: #e9ecef;
    }

    .logout {
        color: #fc5454;
    }
}
</style>